<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StarRocks AI数据分析平台</title>

    <!-- 引入 marked.js -->
    <script src="/js/marked.min.js"></script>

    <!-- 引入 ECharts -->
    <script src="/js/echarts.min.js"></script>

    <link rel="stylesheet" href="/style/index.css">
</head>
<body>
<div class="container">
    <header>
        <div class="logo">
            <span class="logo-icon">📊</span>
            StarRocks AI数据分析平台
        </div>
        <div class="header-info">
            <span id="currentDate"></span>
        </div>
    </header>

    <section class="query-section">
        <div class="input-group">
            <input type="text" id="queryInput" placeholder="输入自然语言查询，例如：显示最近7天各区域的销售额趋势">
            <button id="executeBtn">执行分析</button>
        </div>

        <div class="examples">
            <div class="example-btn">显示各产品类别销售额占比</div>
            <div class="example-btn">最近30天用户活跃趋势</div>
            <div class="example-btn">各区域销售业绩对比</div>
            <div class="example-btn">用户行为漏斗分析</div>
        </div>
    </section>

    <section class="results-section">
        <div class="chart-container">
            <div class="section-title">
                <i>📈</i> 数据可视化
            </div>

            <div id="chartStatus" class="chart-status">
                等待查询...
            </div>

            <div class="chart-wrapper">
                <div id="chartContainer" style="width: 100%; height: 100%;"></div>
                <div id="chartPlaceholder" class="chart-placeholder">
                    <i>📊</i>
                    <h3>图表将在这里显示</h3>
                    <p>输入查询后，AI将自动生成可视化图表</p>
                </div>
            </div>

            <div class="loading">
                <div class="spinner"></div>
                <div>正在分析数据，请稍候...</div>
            </div>
        </div>

        <div class="summary-container">
            <div class="section-title">
                <i>💡</i> AI分析总结
            </div>
            <div id="summaryArea" class="ai-summary">
                <h3>分析结果将显示在这里</h3>
                <p>输入查询后，AI将自动分析数据模式并提供业务洞察</p>
            </div>

            <div id="errorArea" class="error-container">
                <!-- 错误信息将显示在这里 -->
            </div>

            <div id="debugArea" class="debug-info">
                <!-- 调试信息将显示在这里 -->
            </div>
        </div>
    </section>

    <div class="status-bar">
        <div>连接状态: <span id="connectionStatus">未连接</span></div>
        <div>最后更新: <span id="lastUpdate">--</span></div>
    </div>
</div>

<footer>
    <p>© 2025 StarRocks AI数据分析平台 | 基于LangChain4j和StarRocks构建</p>
</footer>

<script src="/js/index.js"></script>
</body>
</html>